<template>
    <div class="lt_content">
            <!-- 区域滚动 -->
            <div class="lt_wrapper">
                <div class="lt_cateLeft">
                    <ul>
                       <li><a href="#" >运动馆</a></li>
                       <li><a href="#" >女士馆</a></li>
                       <li><a href="#" >运动馆</a></li>
                       <li><a href="#" >运动馆</a></li>
                       <li><a href="#" >运动馆</a></li>
                    </ul>
                </div>
                <div class="lt_cateRight">
                    <ul>
                        <li><a href="#"><img src="../../images/brand1.png" onerror="this.src='images/none01.jpg'" alt=""><p>耐克</p></a></li>
                        <li><a href="#"><img src="../../images/brand2.png" onerror="this.src='images/none01.jpg'" alt=""><p>阿迪达斯</p></a></li>
                        <li><a href="#"><img src="../../images/brand3.png" onerror="this.src='images/none01.jpg'" alt=""><p>三叶草</p></a></li>
                        <li><a href="#"><img src="../../images/brand4.png" onerror="this.src='images/none01.jpg'" alt=""><p>新百伦</p></a></li>
                        <li><a href="#"><img src="../../images/brand5.png" onerror="this.src='images/none01.jpg'" alt=""><p>匡威</p></a></li>
                        <li><a href="#"><img src="../../images/brand6.png" onerror="this.src='images/none01.jpg'" alt=""><p>匡威</p></a></li>
                      <!-- todo render -->
                    </ul>
                </div>
            </div>
        </div>
</template>
<script>
</script>
<style lang="scss" scoped>
ul {
    list-style: none;
    margin: 0;
    padding: 0;

}
.lt_cateLeft {
  width: 90px;
  height: 100%;
  float: left;
  ul {
    width: 100%;
    li {
      height: 50px;
      line-height: 50px;
      width: 100%;
      text-align: center;
      font-size: 12px;
      background: #f5f5f5;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      a {
        display: block;
        width: 100%;
        color: #333;
      }
    }
    li.now {
      background: #fff;
      border-right: none;
      a {
        color: #f60;
      }
    }
  }
}
.lt_cateRight {
  overflow: hidden;
  height: 100%;
  ul {
    width: 100%;
    li {
      width: 33.3333%;
      float: left;
      a {
        width: 100%;
        display: block;
        p {
          text-align: center;
          color: #666;
          font-size: 12px;
        }
        img {
          width: 60px;
          height: 60px;
          display: block;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>

